<template>
  <div class="mod-config">
    <basic-container>
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="请选择停车场" prop="parkName">
          <el-select v-model="queryParams.parkId" class="m-2" placeholder="请选择停车场" @change="getParkId">
            <el-option v-for="item in parkName" :key="item.id" :label="item.parkName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="请选择区域" prop="regionName">
          <el-select v-model="queryParams.regionId" class="m-2" placeholder="请选择区域">
            <el-option v-for="item in regionName" :key="item.id" :label="item.regionName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="请选择是否分配" prop="typeName">
          <el-select v-model="queryParams.type" class="m-2" placeholder="请选择是否分配">
            <el-option v-for="item in typeState" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="请选择是否在线" prop="isOnLineName">
          <el-select v-model="queryParams.isOnLine" class="m-2" placeholder="请选择是否在线">
            <el-option v-for="item in onlineState" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="请填写设备编号" prop="sn">
          <el-input v-model="queryParams.sn" placeholder="请填写设备编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-button v-if="permissions.stop_lotdevice_add" icon="el-icon-plus" type="primary"
            @click="addOrUpdateHandle()">新增</el-button>
        </el-form-item>
      </el-form>

      <div class="avue-crud">
        <el-table :data="dataList" border v-loading="dataListLoading">
          <el-table-column prop="serviceCodeName" header-align="center" align="center" label="服务商">
          </el-table-column>
          <el-table-column prop="sn" header-align="center" align="center" label="设备编号">
          </el-table-column>
          <el-table-column prop="parkName" header-align="center" align="center" label="停车场名称">
          </el-table-column>
          <el-table-column prop="regionName" header-align="center" align="center" label="区域名称">
          </el-table-column>
          <el-table-column prop="lotNo" header-align="center" align="center" label="泊位号">
          </el-table-column>
          <el-table-column prop="typeName" header-align="center" align="center" label="分配状态">
          </el-table-column>
          <el-table-column prop="isOnLineName" header-align="center" align="center" label="是否在线">
          </el-table-column>
          <el-table-column prop="createBy" header-align="center" align="center" label="创建人">
          </el-table-column>

          <el-table-column prop="createTime" header-align="center" align="center" label="创建时间">
          </el-table-column>
          <el-table-column header-align="center" align="center" label="操作">
            <template #default="scope">
              <el-button v-if="permissions.stop_lotdevice_edit" type="primary" size="small" @click="addType(scope.row)">
                分配</el-button>
              <el-button v-if="permissions.stop_lotdevice_del" type="danger" size="small"
                @click="deleteHandle(scope.row)">解绑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
          :current-page="queryParams.current" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.size"
          :total="totalPage" background layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
      <TableType v-if="addOrUpdateVisibleType" ref="addOrUpdateType" @refreshDataList="getDataList"></TableType>
    </basic-container>
  </div>
</template>

<script>
import { fetchListLot, delObj, putObj } from '@/api/roadStop/lotdevice'
import { regionRoadAll } from '@/api/roadStop/regionlotroad'
import { fetchList } from '@/api/roadStop/regionroad'
import TableForm from './lotdevice-form.vue'
import TableType from './lotdevice-Type.vue'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      dataForm: {
        key: ''
      },
      queryParams: {
        current: 1,
        size: 10
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      addOrUpdateVisibleType: false,
      getParkIds: {
        isRoad: 1,
      },
      typeState: [
        { value: 0, label: '未分配' },
        { value: 1, label: '分配' },
      ],
      onlineState: [
        { value: 0, label: '否' },
        { value: 1, label: '是' },
      ],
      parkName: [],
      regionName: [],
    }
  },
  components: {
    TableForm, TableType
  },
  created () {
    this.getDataList()
    this.getDataListTwo()
    // this.getDataListRoad()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    getDataListTwo () {
      fetchList(this.getParkIds).then(response => {
        this.parkName = response.data.data
      })
    },
    getDataListRoad () {
      regionRoadAll(this.getParkIds).then(response => {
        this.regionName = response.data.data
      })
    },
    getParkId (val) {
      this.queryParams.regionId = undefined
      this.getParkIds.parkId = val
      this.getDataListRoad()
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      fetchListLot(Object.assign(this.queryParams)).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    //分配
    addType (val) {
      this.addOrUpdateVisibleType = true
      this.$nextTick(() => {
        this.$refs.addOrUpdateType.init(val)
      })
    },
    // 删除
    deleteHandle (val) {
      this.$confirm('是否确认解绑ID为' + val.sn, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return putObj({ sn: val.sn, id: val.id })
      }).then(data => {
        this.$message.success('解绑成功')
        this.getDataList()
      }).catch(() => { })
    },
    handleQuery () {
      this.queryParams.current = 1;
      this.getDataList()
    },
    resetQuery () {
      this.queryParams = {
        current: 1,
        size: 10,
      };
      this.getParkIds = {
        isRoad: 1,
      }
      this.getDataListRoad()
      //   this.resetForm("queryForm");
      this.handleQuery();
    }
  }
}
</script>
